<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>当日分时交易量统计</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }
        .chart-container {
            height: 500px;
            margin-bottom: 20px;
        }
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        button {
            padding: 8px 16px;
            background-color: #4a7bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #3a6be8;
        }
        .status {
            text-align: center;
            margin-top: 15px;
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>当日分时交易量统计</h1>
        <div class="controls">
            <button id="refreshBtn">刷新数据</button>
            <button id="simulateBtn">模拟新数据</button>
        </div>
        <div id="chart" class="chart-container"></div>
        <div class="status" id="status">数据最后更新时间: <span id="updateTime">--:--:--</span></div>
    </div>

    <script>
        // 初始化ECharts实例
        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom);
        
        // 全局变量
        let transactionData = {
            times: [],      // 时间点 ['00:00', '00:01', ...]
            success: [],    // 成功笔数
            fail: []        // 失败笔数
        };
        
        let lastUpdateTime = null; // 记录最后更新时间
        let dataUpdateInterval = null; // 数据更新定时器
        let dayCheckInterval = null;  // 日期检查定时器
        
        // 生成时间序列（从00:00到当前时间）
        function generateTimeSeries() {
            const now = new Date();
            const currentHour = now.getHours();
            const currentMinute = now.getMinutes();
            
            const times = [];
            
            // 生成从00:00到当前时间的时间点
            for (let hour = 0; hour <= currentHour; hour++) {
                const maxMinute = (hour === currentHour) ? currentMinute : 59;
                for (let minute = 0; minute <= maxMinute; minute++) {
                    const timeStr = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
                    times.push(timeStr);
                }
            }
            
            return times;
        }
        
        // 模拟从后台获取数据（实际应用中应替换为真实的API调用）
        function fetchTransactionData() {
            return new Promise((resolve) => {
                // 模拟API延迟
                setTimeout(() => {
                    const times = generateTimeSeries();
                    const success = [];
                    const fail = [];
                    
                    // 生成模拟数据
                    for (let i = 0; i < times.length; i++) {
					    //console.log(i);
                        // 随机生成成功和失败笔数（实际应用中应从API获取真实数据）
                        success.push(Math.floor(Math.random() * 100));
                        fail.push(Math.floor(Math.random() * 20));
                    }
                    
                    resolve({ times, success, fail });
                }, 500);
            });
        }
        
        // 获取最新时间点的数据（模拟）
        function fetchLatestData() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    const now = new Date();
                    const currentTime = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
                    // 如果当前时间点已存在，则更新数据；否则添加新时间点
                    const index = transactionData.times.indexOf(currentTime);
                    
                    if (index !== -1) {
                        // 更新时间点的数据
                        transactionData.success[index] += Math.floor(Math.random() * 5);
                        transactionData.fail[index] += Math.floor(Math.random() * 2);
                    } else {
                        // 添加新时间点
                        transactionData.times.push(currentTime);
                        transactionData.success.push(Math.floor(Math.random() * 10));
                        transactionData.fail.push(Math.floor(Math.random() * 3));
                    }
                    
                    resolve({
                        time: currentTime,
                        success: transactionData.success[transactionData.success.length - 1],
                        fail: transactionData.fail[transactionData.fail.length - 1]
                    });
                }, 300);
            });
        }
        
        // 更新图表
        function updateChart() {
            const option = {
                title: {
                    text: '当日分时交易量统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: ['成功笔数', '失败笔数'],
                    top: 30
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: transactionData.times,
                    axisLabel: {
                        interval: (index) => {
                            // 每10个时间点显示一个标签，避免过于密集
                            return index % 60 === 0;
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '笔数',
					axisLine: {
						show: true,
					}
                },
                series: [
                    {
                        name: '成功笔数',
                        type: 'line',
                        data: transactionData.success,
                        smooth: true,
                        lineStyle: {
                            width: 1
                        },
                        itemStyle: {
                            color: '#52c41a'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(82, 196, 26, 0.3)'
                                }, {
                                    offset: 1, color: 'rgba(82, 196, 26, 0.05)'
                                }]
                            }
                        }
                    },
                    {
                        name: '失败笔数',
                        type: 'line',
                        data: transactionData.fail,
                        smooth: true,
                        lineStyle: {
                            width: 1
                        },
                        itemStyle: {
                            color: '#f5222d'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(245, 34, 45, 0.3)'
                                }, {
                                    offset: 1, color: 'rgba(245, 34, 45, 0.05)'
                                }]
                            }
                        }
                    }
                ]
            };
            
            myChart.setOption(option);
        }
        
        // 初始化数据并渲染图表
        async function initializeChart() {
            try {
                const data = await fetchTransactionData();
                transactionData = data;
                lastUpdateTime = new Date();
                updateChart();
                updateStatus();
                
                // 开始定时更新数据
                startDataUpdate();
                
                // 开始日期检查
                startDayCheck();
            } catch (error) {
                console.error('初始化数据失败:', error);
            }
        }
        
        // 开始定时更新数据
        function startDataUpdate() {
            // 清除之前的定时器
            if (dataUpdateInterval) {
                clearInterval(dataUpdateInterval);
            }
            
            // 每分钟更新一次数据
            dataUpdateInterval = setInterval(async () => {
                try {
                    await fetchLatestData();
                    lastUpdateTime = new Date();
                    updateChart();
                    updateStatus();
                } catch (error) {
                    console.error('更新数据失败:', error);
                }
            }, 60000); // 每分钟更新一次
        }
        
        // 开始日期检查
        function startDayCheck() {
            // 清除之前的定时器
            if (dayCheckInterval) {
                clearInterval(dayCheckInterval);
            }
            
            // 每分钟检查一次是否到了第二天00:00
            dayCheckInterval = setInterval(() => {
                const now = new Date();
                if (now.getHours() === 0 && now.getMinutes() === 0) {
                    // 到了第二天00:00，重置数据
                    resetData();
                }
            }, 60000); // 每分钟检查一次
        }
        
        // 重置数据（第二天00:00时调用）
        function resetData() {
            transactionData = {
                times: [],
                success: [],
                fail: []
            };
            
            // 重新初始化图表
            initializeChart();
        }
        
        // 更新状态显示
        function updateStatus() {
            if (lastUpdateTime) {
                const timeStr = lastUpdateTime.toTimeString().split(' ')[0];
                document.getElementById('updateTime').textContent = timeStr;
            }
        }
        
        // 模拟新数据（用于演示）
        async function simulateNewData() {
            try {
                await fetchLatestData();
                lastUpdateTime = new Date();
                updateChart();
                updateStatus();
                alert('已添加模拟数据！');
            } catch (error) {
                console.error('模拟数据失败:', error);
            }
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initializeChart();
            
            // 绑定按钮事件
            document.getElementById('refreshBtn').addEventListener('click', initializeChart);
            document.getElementById('simulateBtn').addEventListener('click', simulateNewData);
            
            // 窗口大小变化时重绘图表
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        });
    </script>
</body>
</html>